<template>
  <div class="friend-circle">
    <div v-for="post in posts" :key="post.id" class="post">
      <div class="post-header">
        <div class="post-info">
          <img :src="post.doctorPic" alt="User Avatar" class="post-image">
          <p class="username">{{ post.doctorName }} <span style="margin: 0 10px;"></span> {{post.doctorPositions}}</p>
          <p class="timestamp"><dict-tag :options="dict.type.hospital_department" :value="post.doctorDepartments"></dict-tag>{{post.advisoryTime}}</p>
        </div>
      </div>
      <div>
        <el-button v-if="post.advisoryState === 1" type="primary" @click="con(post.id)">继续问诊</el-button>
        <el-button v-if="post.advisoryState === 1" type="primary" @click="end(post.id)">结束问诊</el-button>
        <el-button v-if="post.advisoryState === 3" type="primary">评价</el-button>
      </div>

    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
import Icons from "@/views/components/icons/index.vue";
import { getInfo } from '@/api/login'
import {doctorFindById, updAdvisory} from "@/api/consultation/consultation";
export default {
  dicts: ['hospital_department'],
  //import引入的组件需要注入到对象中才能使用"
  props: {},
  data() {
    //这里存放数据"
    return {
      avatar:"",
      posts: [
        // 更多的朋友圈动态...
      ],
      doctor:{
        doctorId: null,
        advisoryState: null,
        userId: null
      },
    };
  },
  //计算属性 类似于data概念",
  computed: {},
  //监控data中的数据变化",
  watch: {},
  //方法集合",
  methods: {
    list() {
      doctorFindById(this.doctor).then(res => {
        this.posts = res.data;
      });
    },
    end(id){
      this.doctor.advisoryState=3
      updAdvisory(this.doctor).then(res=>{
        if (res.code==200){
          this.$message.success("已成功结束问诊,可以去评价了!")
        }
      })
    },
  },
// 生命周期 - 创建完成（可以访问当前this实例）"
  created() {
    getInfo().then(res => {
      this.avatar = res.data.user.avatar;
      this.doctor.userId = res.data.user.userId;
      this.list(); // 在这里调用list()方法
    });
  },
// 生命周期 - 挂载完成（可以访问DOM元素）"
  mounted() {

  },

  beforeCreate() {
  }, //生命周期 - 创建之前",
  beforeMount() {
  }, //生命周期 - 挂载之前",
  beforeUpdate() {
  }, //生命周期 - 更新之前",
  updated() {
  }, //生命周期 - 更新之后",
  beforeDestroy() {
  }, //生命周期 - 销毁之前",
  destroyed() {
  }, //生命周期 - 销毁完成",
  activated() {
  } //如果页面有keep-alive缓存功能，这个函数会触发",
};
</script>
<style scoped>
.friend-circle {
  background-color: #F5F5F5;
  padding: 20px;
}

.back-button {
  background-color: transparent;
  border: none;
  color: #999999;
  cursor: pointer;
  margin-right: 10px;
}

.favorite-post {
  background-color: yellow;
}



.back-button:focus {
  outline: none;
}

.comment-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.left {
  background-color: #f0f0f0;
  flex: 1;
}

.right {
  text-align: right;
}

.comment-header {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.comment-section {
  float: right;
}
.post {
  background-color: #FFFFFF;
  border-radius: 10px;
  margin-bottom: 20px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.post-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}

.username {
  font-weight: bold;
  margin-bottom: 5px;
}

.timestamp {
  color: #999999;
}

.post-content {
  margin-bottom: 10px;
}

.post-image {
  width: 100%;
  max-height: 300px;
  object-fit: cover;
  margin-bottom: 10px;
}


.comment {
  margin-bottom: 10px;
}

.sub-comment {
  margin-left: 20px;
  margin-bottom: 5px;
}
.username {
  font-weight: bold;
  margin-bottom: 0;
}

.timestamp {
  color: #999999;
  margin-bottom: 0;
}

.post {
  background-color: #dedad4;
}


/* 更多样式... */
</style>
